<template>
  <div>
    <!-- 搜索框 -->
    <div class="search1">
      <div class="search-left1">
        <div class="search_item1">
          <el-input @keyup.enter.native="getAttendList" v-model="keyword" placeholder="请输入要查询的关键字"></el-input>
        </div>
        <div class="search_item">
          <el-button class="anniubtn" @click="getAttendList" type="primary" size="small" icon="el-icon-search">搜索
          </el-button>
        </div>
        <div class="search_item">
          <el-button class="anniubtn" @click="reset" size="small" icon="el-icon-refresh-left">重置
          </el-button>
        </div>
      </div>
      <div class="search-right1">
        <div class="attendance_add">
          <el-button @click="addAttendance('add')" class="el_button_add" type="primary" size="small"
            icon="el-icon-plus">新增考勤组</el-button>
          <el-button @click="downLoadTemplete" class="el_button_add" type="primary" size="small"
            icon="el-icon-download">下载模版</el-button>
        </div>
      </div>
    </div>
    <div class="table_info">
      <!-- 考勤组详情 -->
      <div class="new_add flex">
        <div class="attendance_details">考勤组详情</div>
      </div>
      <div class="table">
        <!-- 表格头 -->
        <div class="table_head flex">
          <div class="table_head_items">考勤组名称</div>
          <div class="table_head_items">考勤组组长</div>
          <div class="table_head_items">班次名称</div>
          <div class="table_head_items">日满勤时间</div>
          <div class="table_head_items">考勤类型</div>
          <div class="table_head_items">操作</div>
        </div>
        <!-- 表格体 -->
        <div class="table_body flex" v-for="(item, index) in schedualGroupList" :key="index"
          :class="index % 2 > 0 ? 'background_f5' : ''">
          <div class="table_body_items">{{ item.group_name }}</div>
          <div class="table_body_items">{{ item.manager_name }}</div>
          <div class="table_body_items">{{ item.shift_name }}</div>
          <div class="table_body_items">每人/每天/{{ item.day_time_count }}小时</div>
          <div class="table_body_items">{{ item.scheduling == 1 ? '固定上下班' : '排班上下班' }}</div>
          <div class="table_body_items">
            <el-link type="primary" @click="getAttendanceUserList(item)">查看成员</el-link>
            <el-link class="marginleft12"  type="primary" @click="addAttendance('edit', item)">编辑</el-link>
            <el-link class="marginleft12"  type="danger" @click="delGrouo(item)">删除</el-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="el_pagination">
      <el-pagination class="el_pagation1" background @current-change="handleCurrentChange"
        layout="total, prev, pager, next" :page-size="pageSize" :total="schedualGroupLength">
      </el-pagination>
    </div>
    <!-- 新增考勤组弹窗 -->
    <el-dialog :close-on-click-modal="false" v-dialogDrag class="add_atendance" :title="isEdit ? '编辑考勤组' : '新增考勤组'"
      :visible.sync="addAttendanceDialog" width="800px" :before-close="handleClose">
      <div class="content">
        <div class="content_items flex">
          <div class="content_items_left"><span class="asterisk">*</span>考勤组名称：</div>
          <div class="content_items_right">
            <el-input v-model="group_name" placeholder="请输入考勤组名称"></el-input>
          </div>
        </div>
        <div class="content_items flex">
          <div class="content_items_left"><span class="asterisk">*</span>考勤组组长：</div>
          <div class="content_items_right">
            <el-input @focus="chooseGroup(1)" v-model="manager_user_name" placeholder="请选择考勤组长"></el-input>
          </div>
        </div>
        <div class="content_items flex">
          <div class="content_items_left"><span class="asterisk">*</span>考勤组子管理员：</div>
          <div class="content_items_right">
            <el-input @focus="chooseGroup(2)" v-model="sub_manager_name" placeholder="请选择考勤组子管理员"></el-input>
          </div>
        </div>
        <div class="content_items flex">
          <div class="content_items_left"><span class="asterisk">*</span>是否需要排班：</div>
          <div class="content_items_right">
            <div class="content_items_right_radio">
              <el-radio-group v-model="scheduling" @change="schedulingChange">
                <el-radio :label="2">需要</el-radio>
                <el-radio :label="1">不需要</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <!-- 班次名称： -->
        <div class="content_items flex">
          <div class="content_items_left"><span class="asterisk">*</span>班次名称：</div>
          <div class="content_items_right">
            <el-select class="el_select" v-model="shift_id" :key="shiftKey" placeholder="请选择班次">
              <el-option v-for="item in schedualList" :key="item.id" :value="item.id" :label="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 日满勤选项 -->
        <div class="content_items flex">
          <div class="content_items_left"><span class="asterisk">*</span>日满勤时间：</div>
          <div class="content_items_right">
            <el-select class="el_select" v-model="day_time_count" placeholder="请选择时间">
              <el-option v-for="(item, index) in 12" :key="index" :value="item" :label="'每人/每天/' + item + '小时'">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 考勤方式 -->
        <div class="content_items flex">
          <div class="content_items_left">考勤方式：</div>
          <div class="content_items_right">
            <el-select v-model="clock_type">
              <el-option label="地点打卡" :value="1"></el-option>
            </el-select>
          </div>
        </div>
        <!-- 地点设置 -->
        <div class="content_items flex">
          <div class="content_items_left">地点设置：</div>
          <div class="map-wrap">
            <el-button size="mini" :disabled="address_list.length >= 3" @click="mapHandle" type="primary">添加地点
            </el-button>
            <div class="map-table">
              <ul class="map-th">
                <li>考勤地址</li>
                <li>有效范围</li>
                <li>操作</li>
              </ul>
              <ul class="map-tb">
                <li v-for="(item, index) in address_list">
                  <div>{{ item.address_name }}</div>
                  <div>{{ item.distance + '米' }}</div>
                  <div class="opera">
                    <el-link :underline="false" style="margin-right: 5px;" @click="editAddress(item, index)"
                      type="primary">修改地点</el-link>
                    <el-link :underline="false" v-if="index > 0" @click="delAddress(index)" type="primary">删除</el-link>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 是否支持外勤 -->
        <div class="content_items flex">
          <div class="content_items_left">是否支持外勤：</div>
          <div class="content_items_right">
            <div class="content_items_right_radio">
              <el-radio v-model="is_allow_out" :label="1">支持</el-radio>
              <el-radio v-model="is_allow_out" :label="2">不支持</el-radio>
            </div>
          </div>
        </div>
        <!-- 补卡规则 -->
        <div class="content_items flex">
          <div class="content_items_left">补卡规则：</div>
          <div class="content_items_right">
            <div class="punch">
              <div>补卡次数：每月的提交<el-input-number size="small" v-model="replenishment_max_number" :min="1" :max="99">
                </el-input-number>
                次补卡，每月的1号起算</div>
              <div>补卡时限：可申请过去<el-input-number size="small" v-model="replenishment_latest_day" :min="1" :max="99">
                </el-input-number>
                自然日内的补卡</div>
            </div>
          </div>
        </div>
        <!-- 统计截止 -->
        <div class="content_items flex">
          <div class="content_items_left">统计截止时间：</div>
          <div class="content_items_right">
            次月
            <el-select v-model="dead_line">
              <el-option v-for="(item, index) in dataTimes" :key="index" :label="item + '号'" :value="index"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAttendanceGroup">确认</el-button>
      </span>
    </el-dialog>
    <!-- 查看成员列表 -->
    <el-dialog :close-on-click-modal="false" :title="schedualGroupName" v-dialogDrag class="look_user" :visible.sync="attendancesUserListDialog" width="800px"
      :before-close="handleClose">
      <div class="button_group">
        <el-input class="el_input_user" v-model="personInput" @keyup.enter.native="personSearch" placeholder="请输入要查询的名字"></el-input>
        <el-button class="get_user_btn" type="primary" size="small" @click="personSearch" icon="el-icon-search">查询</el-button>
        <el-button @click="addAttendanceUsers" class="add_user_btn" type="primary" size="small" icon="el-icon-plus">新增
        </el-button>
        <el-button @click="delAttendanceUsers" v-show="userList.length > 0" type="danger" size="small"
          icon="el-icon-delete">删除</el-button>
      </div>
      <div class="user_list flex1" v-if="userList.length > 0">
        <div v-for="item in userList" :key="item.id">
          <div :class="item.isDelete ? 'user_list_items1' : 'user_list_items'" class="flex" @click="selectUser(item)">
            <div class="user_header"><img src="../../../assets/imgs/header.png"></div>
            <div class="user_info">
              <div class="user_checked">
                <div :class="item.isDelete ? 'ring1' : 'ring'" v-show="item.isDeleteShow"></div>
              </div>
              <div class="user_department">工号：{{ item.enCode }}</div>
              <div class="user_name">姓名：{{ item.realName }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="user_list2 flex2" v-else>
        <div class="user_list2_box">
          <img src="../../../assets/imgs/nodata.svg">
          暂无数据
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-show="isDeleteFlag">
        <el-button @click="attendancesUserListDialog = false">取 消</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="confirmDelete">确 认 删 除</el-button>
      </span>
    </el-dialog>
    <!-- 下载模板 -->
    <el-dialog :close-on-click-modal="false" title="下载模板" class="downloadongss" :visible.sync="downloadDialog" width="30%"
      :before-close="handleClose">
      <div class="content">
        <div class="content_items flex">
          <div class="content_items_left">考勤组：</div>
          <div class="content_items_right">
            <el-select class="el_select" v-model="groupIds" placeholder="请选择">
              <el-option v-for="(item, index) in schedualGroupList1" :key="index" :label="item.group_name"
                :value="item.F_Id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="content_items flex">
          <div class="content_items_left">选择时间：</div>
          <div class="content_items_right">
            <div class="block">
              <el-date-picker class="el_date_month" v-model="selectDate" type="month" format="yyyy-MM"
                value-format="yyyy-MM" placeholder="请选择月份">
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
      </span>
    </el-dialog>
    <!-- 给考勤组添加人员 -->
    <el-dialog :close-on-click-modal="false" v-dialogDrag title="添加成员" :append-to-body="true" :visible.sync="addAttendanceGroupNumberDialog"
      width="60%" style="padding: 10px 20px;">
      <SelectUser v-if="addAttendanceGroupNumberDialog" ref="addNumberRef" :selectedList="selectedList"></SelectUser>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancale()">取消</el-button>
        <el-button size="mini" type="primary" @click="sure()">确认</el-button>
      </span>
    </el-dialog>
    <!-- 添加组长弹出框 -->
    <el-dialog :close-on-click-modal="false" v-dialogDrag title="添加组长" :append-to-body="true" :visible.sync="memberDialogVisible"
       width="60%" style="padding: 10px 20px;">
      <SelectUser v-if="memberDialogVisible" ref="addPesonelRef" :selectedList="groupTypeOneList"></SelectUser>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="memberDialogVisible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="confirmMemberDialog(1)">确定</el-button>
      </span>
    </el-dialog>
    <!-- 添加子组长 -->
    <el-dialog :close-on-click-modal="false" v-dialogDrag title="添加子组长" :append-to-body="true" :visible.sync="memberDialogVisible2"
      width="60%" style="padding: 10px 20px;">
      <SelectUser v-if="memberDialogVisible2" ref="addPesonelRef2" :selectedList="groupTypeTwoList"></SelectUser>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="memberDialogVisible2 = false">取消</el-button>
        <el-button size="mini" type="primary" @click="confirmMemberDialog(2)">确定</el-button>
      </span>
    </el-dialog>
    <!-- 高德地图弹窗 -->
    <el-dialog v-dialogDrag title="地点设置" class="map-dialog" :append-to-body="true" :visible.sync="mapVisabloe"
      :close-on-click-modal="false" width="80%">
      <el-amap class="map" vid="amap" :center="mapOptions.center" :zoom="mapOptions.zoom">
        <!-- 打卡范围 -->
        <el-select v-model="mapOptions.rangeVal" class="map-range" placeholder="请选择">
          <el-option v-for="item in mapRangeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 圆形范围 -->
        <el-amap-circle :center="mapOptions.center" :visible="true" :radius="mapOptions.rangeVal"></el-amap-circle>
        <!-- 搜索 -->
        <el-amap-search-box ref="mapSearch" datatype="all" city="北京" :citylimit="true" @select="selectPoi"
          @choose="selectPoi">
        </el-amap-search-box>
        <!-- 比例尺 -->
        <el-amap-control-tool-bar></el-amap-control-tool-bar>
        <!-- 点标记 -->
        <el-amap-marker :position="mapOptions.position"></el-amap-marker>
        <!-- 文字标记 -->
        <el-amap-text :position="mapOptions.position" :text="mapOptions.text"></el-amap-text>
      </el-amap>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="mapVisabloe = false">取消</el-button>
        <el-button size="mini" type="primary" @click="confirmMap">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addAttendanceGroup,
  getAttendanceGroupList,
  getAttendanceGroupManageList,
  delAttendancegroup,
  insertReleations,
  getGroupMembers,
  deleteReleation,
  UpdateSchedualgroup,
  getAllByFlag
}
  from '@/api/user.js';
import request from '@/router/axios';
import SelectUser from "@/components/organization/SelectUser";
// import AMap from 'AMap'
import Vue from 'vue'
import VueAMap from '@vuemap/vue-amap'
import '@vuemap/vue-amap/dist/style.css'
import { getMultiMaintainerUser } from "@/api/organization/user.js";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '99e7c8447da77e04659caa9ba42570b9',
  plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.Geocoder']
})

import { baseUrl } from '@/config/env';
export default {
  components: { SelectUser },
  data() {
    return {
      keyword: '',
      addAttendanceDialog: false,
      selectDate: '',
      groupIds: '',
      attendancesUserListDialog: false,
      addAttendanceGroupNumberDialog: false,
      downloadDialog: false,
      checked: false,
      userList: [
      ],
      personInput: '',
      //开发
      schedualList: [],//班次列表
      shiftKey: 'shift4',
      groupId: '',
      groupType: 0, // 1 为考勤组长，2 为考勤子组长
      groupTypeOneList: [],
      groupTypeTwoList: [],
      group_name: '',//考勤组名称
      manager_id: '',//考勤组组长id
      manager_user_name: '',//考勤组组长姓名
      sub_manager_name: '', // 考勤子用户名
      sub_manager_id: '', // 考勤子用户 id
      scheduling: 2,//是否需要排班
      shift_id: '',//班次id
      day_time_count: '',//日满勤时间
      clock_type: 1, // 考勤方式，地点打卡
      is_allow_out: 1, // 是否支持外勤打卡，1 支持，2 不支持
      replenishment_max_number: 20, // 补卡次数
      replenishment_latest_day: 20, // 补卡自然日
      dead_line: 1, // 统计截止时间
      // deadLineOptions: [{
      //   value: 1,
      //   label: '1号'
      // }],
      address_list: [{
        address_name: '重庆太蓝新能源', // 地点名称
        distance: 100, // 打卡范围
        lat: 39.965036,
        lit: 116.393651,
      }],

      schedualGroupLength: 0,
      schedualGroupList: [],
      schedualGroupList1: [],
      currentpage: 1,
      pageSize: 15,
      memberDialogVisible: false,
      memberDialogVisible2: false,
      selectedList: [],
      flagMember: false,
      schedualGroupName: '',
      schedualGroupId: '',
      isEdit: false,
      isDeleteFlag: false,

      mapOptions: {
        center: [116.393651, 39.965036],
        position: [116.393651, 39.965036],
        zoom: 15,
        text: '重庆太蓝新能源',
        rangeVal: 100
      },
      mapRangeOptions: [
        {
          value: 100,
          label: '100米'
        },
        {
          value: 200,
          label: '200米'
        },
        {
          value: 300,
          label: '300米'
        },
        {
          value: 400,
          label: '400米'
        },
        {
          value: 500,
          label: '500米'
        },
        {
          value: 600,
          label: '600米'
        },
        {
          value: 700,
          label: '700米'
        },
        {
          value: 800,
          label: '800米'
        },
        {
          value: 900,
          label: '900米'
        },
        {
          value: 1000,
          label: '1000米'
        },
        {
          value: 2000,
          label: '2000米'
        },
        {
          value: 3000,
          label: '3000米'
        }
      ],
      dataTimes: [],
      mapVisabloe: false, // 考勤弹窗
      mapToggle: 1, // 1 新增 2 编辑
      mapEditIndex: 0, // 存储编辑的 index

    };
  },
  async mounted() {
    this.getDate()
    await this.getAttendList()//获取考勤组列表
    await this.getAllByFlag()//获取班次列表

  },
  methods: {
    getDate() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let d = new Date(year, month, 0);
      let n = +d.getDate();
      for (var i = 1; i < n + 1; i++) {
        this.dataTimes.push(i);
      }
    },
    // filterShift(val) {
    //   let str = ''
    //   this.schedualList.forEach(ele => {
    //     if (ele.id == val) {
    //       str = ele.name
    //     }
    //   })
    //   return str
    // },
    handleClose(done) {
      done();
    },
    // 考勤组新增 or 编辑弹窗
    addAttendance(v, item) {
      if (v == 'add') {
        this.isEdit = false
        this.group_name = ''//考勤组名称
        this.manager_user_name = ''// 考勤组组长姓名
        this.manager_id = ''// 考勤组组长 id
        this.sub_manager_name = '' // 考勤子组长姓名
        this.sub_manager_id = '' // 考勤子组长 id
        this.shift_id = ''// 班次 id
        this.day_time_count = '' // 日满勤时间
        this.scheduling = 2 // 是否需要排版
        this.clock_type = 1  // 考勤方式，地点打卡
        this.is_allow_out = 1  // 是否支持外勤打卡，1 支持，2 不支持
        this.replenishment_max_number = 20 // 补卡次数
        this.replenishment_latest_day = 20 // 补卡自然日
        this.dead_line = 1 // 统计截止时间
        this.groupTypeOneList = [] // 清空组长
        this.groupTypeTwoList = [] // 清空子管理员
        this.address_list = [{
          address_name: '重庆太蓝新能源', // 地点名称
          distance: 100, // 打卡范围
          lat: 39.965036,
          lit: 116.393651,
        }]
      } else if (v == 'edit') {
        this.groupTypeOneList = []
        getMultiMaintainerUser(item.manager_id).then(res => {
          if (res.data.data.length > 0) {
            res.data.data.forEach(ele => {
              this.groupTypeOneList.push(ele.UserInfo)
            })
          }
        })
        this.groupTypeTwoList = []
        getMultiMaintainerUser(item.sub_manager_id).then(res => {
          if (res.data.data.length > 0) {
            res.data.data.forEach(ele => {
              this.groupTypeTwoList.push(ele.UserInfo)
            })
          }
        })
        this.groupId = item.F_Id
        this.group_name = item.group_name // 考勤组名称
        this.manager_id = item.manager_id // 考勤组组长id
        this.manager_user_name = item.manager_name
        this.sub_manager_id = item.sub_manager_id // 考勤子组长 id
        let names = []
        item.sub_manager.forEach(ele => {
          names.push(ele.realName)
        })
        this.sub_manager_name = names.length == 1 ? names[0] : names.join(',')
        this.shift_id = item.shift_id // 班次 id
        this.day_time_count = item.day_time_count // 日满勤时间
        this.scheduling = item.scheduling // 是否需要排班
        this.clock_type = item.clock_type // 考勤方式，地点打卡
        this.is_allow_out = item.is_allow_out  // 是否支持外勤打卡，1 支持，2 不支持
        this.replenishment_max_number = item.replenishment_max_number
        this.replenishment_latest_day = item.replenishment_latest_day // 补卡自然日
        this.dead_line = item.dead_line // 统计截止时间
        this.isEdit = true
        if (item.address_list.length > 0) {
          this.address_list = []
          item.address_list.forEach(ele => {
            this.address_list.push({
              address_name: ele.address_name,
              distance: ele.distance,
              lat: parseFloat(ele.lat),
              lit: parseFloat(ele.lit)
            })
          })
        }
        this.getAllByFlag()
      }
      this.addAttendanceDialog = true
    },
    //选择组长
    chooseGroup(type) {
      this.groupType = type
      if (type == 1) {
        this.memberDialogVisible = true
      } else {
        this.memberDialogVisible2 = true
      }
    },
    delGrouo(item) {
      this.$confirm('确定删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //点击确定
        delAttendancegroup(item.F_Id).then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getAttendList()
          }
        })
      }).catch(() => {
      });
    },
    getAttendanceUserList(item) {
      this.schedualGroupName = item.group_name//考勤组名称
      this.schedualGroupId = item.F_Id//考勤组id
      //调用接口
      this.userList = []
      getGroupMembers(this.schedualGroupId).then(res => {
        if (res && res.data && res.data.data) {
          this.userList = res.data.data
          this.setUserList()
        }
      })
      this.personInput = ''
      this.attendancesUserListDialog = true
      this.isDeleteFlag = false
    },
    getAttendanceUserList1() {
      //调用接口
      this.userList = []
      getGroupMembers(this.schedualGroupId).then(res => {
        if (res && res.data && res.data.data) {
          this.userList = res.data.data
        }
      })
    },
    selectUser(item) {
      if (this.isDeleteFlag) {
        item.isDelete = !item.isDelete
        this.userList = [...this.userList]
      } else {
        this.$message.error("请先点击删除按钮")
      }

    },
    downLoadTemplete() {
      this.getSchedualGroupList1()
      this.downloadDialog = true
    },
    // 获取班次列表
    getAllByFlag() {
      let params = {
        flag: this.scheduling
      }
      getAllByFlag(params).then(res => {
        if (res.data.code == 0 && res.data.success) {
          this.schedualList = res.data.data
        }
      })
    },
    schedulingChange(val) {
      this.schedualList = []
      this.shiftKey++
      this.shift_id = ''
      let params = {
        flag: val
      }
      getAllByFlag(params).then(res => {
        if (res.data.code == 0 && res.data.success) {
          this.schedualList = res.data.data
        }
      })
    },
    // 提交考勤
    submitAttendanceGroup() {
      let params = {
        group_name: this.group_name,
        manager_id: this.manager_id,
        sub_manager_id: this.sub_manager_id,
        scheduling: this.scheduling,
        shift_id: this.shift_id,
        day_time_count: this.day_time_count,
        clock_type: this.clock_type,
        is_allow_out: this.is_allow_out,
        replenishment_max_number: this.replenishment_max_number,
        replenishment_latest_day: this.replenishment_latest_day,
        dead_line: this.dead_line,
        address_list: this.address_list
      }
      if (!this.group_name) {
        this.$message.error("考勤组名称不能为空！")
        return false
      }
      if (!this.manager_id) {
        this.$message.error("考勤组组长不能为空！")
        return false
      }
      if (!this.sub_manager_id) {
        this.$message.error("考勤组子管理员不能为空！")
        return false
      }
      if (!this.shift_id) {
        this.$message.error("请选择班次")
      }
      if (!this.day_time_count) {
        this.$message.error("请选择日满勤时间")
      }
      if (!this.isEdit) {
        addAttendanceGroup(params).then(res => {
          if (res.data.success) {
            this.addAttendanceDialog = false
            this.$message.success("新增成功")
            this.getAttendList()
          } else {
            this.$message.error("新增失败")
          }
        })
      } else {
        params.address_list.forEach(ele => {
          ele.lat = ele.lat.toString()
          ele.lit = ele.lit.toString()
        })
        UpdateSchedualgroup(this.groupId, { oa_attendance_groupEntity: params }).then(res => {
          if (res.data.success) {
            this.addAttendanceDialog = false
            this.$message.success("编辑成功")
            this.getAttendList()
          } else {
            this.$message.error("编辑失败")
          }
        })
      }


    },
    // 获取考勤列表
    getAttendList() {
      let params = {
        // order: 'desc',
        // orderfield: 'F_CreateDate',
        group_name: this.keyword,
        limit: this.currentpage,
        size: this.pageSize,
      }
      getAttendanceGroupManageList(params).then(res => {
        if (res && res.data && res.data.data) {
          this.schedualGroupLength = res.data.data.Total//长度
          this.schedualGroupList = res.data.data.Rows
        }
      })
    },
    getSchedualGroupList1() {
      let params = {
        scheduling: 2,
        limit: 1,
        size: 1000,
      }
      getAttendanceGroupManageList(params).then(res => {
        if (res && res.data && res.data.data)
          this.schedualGroupList1 = res.data.data.Rows
      })
    },
    handleCurrentChange(val) {
      this.currentpage = val
      this.getAttendList()
    },
    reset() {
      this.keyword = ''
      this.getAttendList()
    },
    cancale() {
      this.addAttendanceGroupNumberDialog = false
    },
    sure() {
      let users = this.$refs.addNumberRef.pushParentData().map(e => {
        return e
      })
      let userIds = []
      if (users.length > 0) {
        users.forEach(e => {
          userIds.push(e.F_UserId)
        });
        let params = {
          "groupId": this.schedualGroupId,
          "userIds": userIds
        }
        insertReleations(params).then(res => {
          if (res.data.success) {
            this.$message.success("操作成功")
            this.addAttendanceGroupNumberDialog = false
            this.getAttendanceUserList1()
          } else {
            this.$message.error("操作失败")
          }
        })
      } else {
        this.$message.warning("您没有选择任何人")
      }


    },
    // 添加组长弹窗
    confirmMemberDialog(type) {
      if (type == 1) {
        let users = this.$refs.addPesonelRef.pushParentData().map(ele => {
          return ele
        })
        if (users.length > 1) {
          this.$message.error("一个考勤组只有一个组长！")
        } else if (users.length == 1) {
          this.manager_id = users[0].F_UserId
          this.manager_user_name = users[0].F_RealName
          this.memberDialogVisible = false
        } else {
          this.$message.error("您还没有选择组长")
        }
      } else {
        let users = this.$refs.addPesonelRef2.pushParentData().map(ele => {
          return ele;
        });
        console.log(users);
        if (users.length > 0) {
          let ids = []
          let names = []
          users.forEach(ele => {
            ids.push(ele.F_UserId)
            names.push(ele.F_RealName)
          })
          this.sub_manager_id = ids.join(',')
          this.sub_manager_name = names.join(',')
          this.memberDialogVisible2 = false
        } else {
          this.$message.error('您还没有选择子组长')
        }
      }
    },
    //新增考勤组人员
    addAttendanceUsers() {
      this.addAttendanceGroupNumberDialog = true
    },
    delAttendanceUsers() {

      // let params = {
      //   "groupId": this.schedualGroupId,
      //   "userIds": ["5d83a5f64e921c1a9ad40df2ca4a2e22","bb612a77ea26c81b83f7ddf079858a2b"]
      // }
      // deleteReleation(params).then(res => {
      // })

      if (this.userList.length > 0) {
        this.isDeleteFlag = true
        this.userList.forEach(e => {
          e.isDeleteShow = true
        })
      }
    },
    confirmDelete() {
      let userIds = []
      if (this.userList.length > 0) {
        this.userList.forEach(e => {
          if (e.isDeleteShow && e.isDelete) {
            userIds.push(e.userId)
          }
        })
        let params = {
          "groupId": this.schedualGroupId,
          "userIds": userIds
        }
        deleteReleation(params).then(res => {
          if (res.data.success) {
            this.$message.success("操作成功")
            this.attendancesUserListDialog = false
          } else {
            this.$message.error("系统错误，请联系管理员")
          }
        })
      }
    },
    setUserList() {
      if (this.userList.length > 0) {
        this.userList.forEach(e => {
          e.isDeleteShow = false
          e.isDelete = false
        })
      }
    },
    downloadTemplate() {
      if (!this.groupIds) {
        this.$message.error("考勤组不能为空！")
        return
      }
      if (!this.selectDate) {
        this.$message.error("请选择时间")
        return
      }
      request({
        url: `${baseUrl}/schedualExcle/download?date=${this.selectDate}&groupId=${this.groupIds}&scheduling=2`,
        method: 'get',
        responseType: 'blob'
      }).then(res => {
        if (res.data.type === 'application/json'){
          let text =  res.data.text();
          text.then(result =>{
            const resultObj = JSON.parse(result);
            if(!resultObj.success){
              console.log(resultObj.msg)
              this.$notify({
                title: "失败",
                message: resultObj.msg,
                type: 'error',
              });
            }
          })
        }else{
          const ct = res.data
          let url = window.URL.createObjectURL(new Blob([ct], {
            type: "application/octet-stream;charset=utf-8",
          }));
          let excelName = '排班模板.xls';
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', excelName);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.downloadDialog = false;
        }
      })
    },
    // 高德地图弹窗
    mapHandle() {
      this.mapVisabloe = true
      this.$nextTick(() => {
        this.mapToggle = 1
        this.$refs.mapSearch.$el.children[0].value = ''
        this.mapOptions = {
          center: [116.393651, 39.965036],
          position: [116.393651, 39.965036],
          zoom: 15,
          text: '重庆太蓝新能源',
          rangeVal: 100
        }
      })
    },
    // 编辑高德
    editAddress(item, itemIndex) {
      this.mapVisabloe = true
      this.mapToggle = 2
      this.mapEditIndex = itemIndex
      this.$nextTick(() => {
        this.$refs.mapSearch.$el.children[0].value = item.address_name
      })
      this.address_list.forEach((ele, index) => {
        if (itemIndex == index) {
          this.mapOptions.center = [item.lit, item.lat]
          this.mapOptions.text = item.address_name
          this.mapOptions.rangeVal = item.distance
        }
      })
    },
    // 确定考勤地点
    confirmMap() {
      if (this.mapToggle == 1) {
        this.address_list.push({
          address_name: this.mapOptions.text,
          distance: this.mapOptions.rangeVal,
          lit: this.mapOptions.center[0],
          lat: this.mapOptions.center[1]
        })
      } else {
        this.address_list.forEach((ele, index) => {
          if (this.mapEditIndex == index) {
            ele.address_name = this.mapOptions.text,
              ele.distance = this.mapOptions.rangeVal,
              ele.lit = this.mapOptions.center[0],
              ele.lat = this.mapOptions.center[1]
          }
        })
      }
      this.mapVisabloe = false

    },
    // 删除考勤地点
    delAddress(index) {
      this.address_list.splice(index, 1)
    },
    // 搜索事件地图
    selectPoi(poi) {
      this.mapOptions.text = poi.poi.name
      if (poi.poi.location) {
        const res = poi.poi.location
        let lng = res.lng // 经度
        let lat = res.lat // 维度
        this.mapOptions.center = [lng, lat]
        this.mapOptions.position = [lng, lat]
      }
    },
  },
};
</script>
<style scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.border {
  border: 1px solid red;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.keyword {
  width: 200px;
  height: 32px;
}

::v-deep .el-input__inner {
  height: 32px;
  margin-top: 4px;
}

.el_button {
  width: 200px;
  margin-left: 24px;
  margin-top: 4px;
}

.reset_btn {
  margin-right: 24px;
}

/* 根据屏幕做适配 */
.table_info {
  margin-top: 8px;
  background: #fff;
}


.new_add {
  height: 50px;
  margin: 0 24px;
}

.attendance_details {
  width: 200px;
  height: 32px;
  font-size: 14px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #333333;
  line-height: 32px;
}

.attendance_add {
  width: 100%;
  height: 50px;
  text-align: right;
}

.el_button_add {
  width: 90px;
  margin-top: 11px;
  margin-right: 12px;
}

.table {
  height: 720px;
  background: #fff;
  margin: 0 24px;
}

.table_head {
  height: 50px;
  background: rgb(244, 244, 244);
}

.background_f5 {
  background: rgb(244, 244, 244);
}

.table_body {
  height: 50px;
}

.table_head_items {
  width: 16.6666%;
  height: 100%;
  color: rgb(51, 51, 51);
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #eee;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 50px;
}

.table_body_items {
  width: 16.66666%;
  height: 100%;
  color: rgb(51, 51, 51);
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #eee;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 50px;
}

.marginleft12 {
  margin-left: 12px;
}

.content {
  width: 100%;
}

.content_items {
  margin-top: 12px;
}

.content_items_left {
  width: 16%;
  height: 50px;
  text-align: right;
  line-height: 50px;
}

.content_items_right {
  width: 82%;
}

.add_atendance .map-wrap {
  width: 82%;
}

.add_atendance ::v-deep .el-dialog__body {
  height: 600px;
}

.map-table {
  padding: 0 20px;
}

.map-table .map-th {
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  border-bottom: 1px solid #ededed;
}

.map-table .map-th li {
  width: 33%;
  text-align: center;
}

.map-table .map-tb {
  margin-top: 10px;
}

.map-table .map-tb li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ededed;
}

.map-table .map-tb li>div {
  display: flex;
  justify-content: center;
  width: 33%;
}

.map-table .map-tb li.opera a {
  margin-left: 10px;
}

.content_items_right_radio {
  width: 100%;
  height: 32px;
  margin-top: 8px;
}

.punch {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.punch>>>.el-input-number__decrease,
.punch>>>.el-input-number__increase {
  top: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.punch>>>.el-input-number:not(.el-slider__input) {
  width: 130px;
  margin: 0 5px;
}

.el_select {
  width: 100%;
}

.button_group {
  width: 100%;
  height: 32px;
}

.el_input_user {
  width: 200px;
}

.get_user_btn {
  margin-left: 24px;
}

.add_user_btn {
  margin-left: 337px;
}

.flex1,
.flex2 {
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}

.flex1>div {
  margin-left: 20px;
}

.user_list {
  width: 100%;
  margin-top: 24px;
  height: 350px;
  overflow: auto;
}

.user_list1 {
  width: 100%;
  height: 200px;
  margin-top: 24px;
  position: relative;

}

.user_list2 {
  width: 100%;
  height: 200px;
  position: relative;
}

.user_list2_box {
  width: 100px;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;

}

.user_list2_box>img {
  width: 100%;

}

.user_list1_box {
  width: 100px;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}

.user_list1_box>img {
  width: 100%;

}

.user_list_items {
  width: 220px;
  height: 90px;
  border: 1px solid #eee;
  margin-top: 24px;
  border-radius: 2px;
}

.user_list_items:hover {
  cursor: pointer;
}

.user_list_items1 {
  width: 220px;
  height: 90px;
  border: 1px solid #f46161;
  margin-top: 24px;
  border-radius: 2px;
  background: #fde9e8;
}

.user_list_items1:hover {
  cursor: pointer;
}

.user_header {
  width: 64px;
  height: 64px;
  margin-top: 13px;
  margin-left: 13px;
  border-radius: 50%;
}

.user_header>img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 高度90 */
.user_info {
  width: 125px;
  height: 100%;
}

.user_checked {
  width: 100%;
  height: 20px;
  margin-top: 10px;
}

.ring {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #666;
  margin-left: 95px;
}

.ring1 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #FDAEAE;
  margin-left: 95px;
  background: #FDAEAE;
}

.user_department,
.user_name {
  width: 100%;
  height: 25px;
}

::v-deep .el-dialog__body {
  overflow-y: auto;
}

::v-deep .el-checkbox__inner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #DCDFE6;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #fb8686;
}

::v-deep .el-checkbox__inner::after {
  box-sizing: content-box;
  border: 1px solid #FFF;
  border-left: 0;
  border-top: 0;
  height: 12px;
  left: 10px;
  top: 2px;
  transform: rotate(45deg) scaleY(0);
  width: 5px !important;
  transition: transform .15s ease-in .05s;
  transform-origin: center;
}

.el_checkbox {
  margin-right: 4px;
}

.el_date_month {
  width: 100%;
}

.el_pagination {
  position: fixed;
  right: 40px;
  bottom: 20px;
}

.asterisk {
  font-size: 24px;
  color: #ed9b9d;
  position: relative;
  top: 8px;
  right: 5px
}

::v-deep .add_atendance>.el-dialog>.el-dialog__footer {
  text-align: center !important;
  ;
}

::v-deep .add_atendance>.el-dialog>.el-dialog__footer>.dialog-footer>button {
  width: 200px;
}

::v-deep .look_user>.el-dialog>.el-dialog__footer {
  border-top: 1px solid #e7e7e7;
}

::v-deep .look_user>.el-dialog>.el-dialog__footer>.dialog-footer>button {
  width: 100px;
  margin-top: 10px;
}

::v-deep .downloadongss>.el-dialog>.el-dialog__footer {
  text-align: center !important;
  ;
}

::v-deep .downloadongss>.el-dialog>.el-dialog__footer>.dialog-footer>button {
  width: 200px;
}

.search1 {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  flex-direction: row;
}
.search-left1{
  width: 60%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.search-right1{
  width: 40%;
  height: 50px;
  display: flex;
  flex-direction: row;
}

.search_item1 {
  width: 250px;
  height: 36px;
  margin-right: 24px;
  margin-left: 24px;

}

.search_item {
  width: 80px;
  height: 36px;
  margin-right: 24px;
  text-align: right;
}

.anniubtn {
  width: 80px;
  margin-top: 4.5px;
}

.map {
  width: 100%;
  height: 500px;
}

.map-dialog ::v-deep .el-dialog__body {
  position: relative;
  height: 500px;
}

.map-range {
  position: absolute;
  top: 13px;
  left: 390px;
  z-index: 3000;
}

.map-range ::v-deep .el-input__inner {
  height: 45px;
  border-radius: 0;
  box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
}
</style>

